<template>
    <el-row class="main">
        <el-col class="padd20 posa">
            <el-row style="box-sizing: border-box;">
                <el-page-header title="课程管理" @back="$router.go(-1)" :content="lineForm.name" class="mb30">
                </el-page-header>
                <el-col class="couse-info">
                    <el-image :src="lineForm.image" style="width: 100%;" fit="fill">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <div class="material pos">
                        {{lineForm.material}}
                    </div>
                    <div class="edit-btn pos" v-if="maxRole=='team' || maxRole=='admin' || maxRole=='cmo'"
                        @click="goEdit()">
                        编辑
                    </div>

                    <el-col class="mask pos box box-pack-between box-align-center">
                        <h3 style="font-size: 22px;" class="ml20">{{lineForm.name}}</h3>
                        <div class="time mr20">{{lineForm.createTime | dateFormat}}</div>
                    </el-col>
                </el-col>
                <el-col class="bgf">
                    <el-col class="box box-pack-start box-align-center">
                        <div class="tab cp" :class="{active:i == current}" v-for="(item,i) in list" :key="i"
                            @click="changeTab(i)">{{item.title}}</div>
                    </el-col>
                    <el-col class="bottom">
                        <el-divider></el-divider>
                        <el-col class="shi">
                            <edit-cous v-if="current == 0" :jyzid="jyzid" :cousid="cous.id" :info="lineForm.info">
                            </edit-cous>
                            <chaper-view v-if="current == 1" :jyzid="jyzid" :cousid="cous.id"></chaper-view>
                            <teach-base v-if="current == 2" :jyzid="jyzid"></teach-base>
                            <record-view v-if="current == 3" :jyzid="jyzid"></record-view>
                        </el-col>
                    </el-col>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
    import moment from "moment"; //格式化时间插件引入
    import chaperView from './components/chaper.vue';
    import teachBase from './components/teachBase.vue';
    import recordView from './components/record.vue';
    import editCous from './components/editcous.vue';

    export default {
        components: {
            chaperView,
            teachBase,
            recordView,
            editCous,
        },
        data() {
            return {
                list: [],
                tabList: [{
                        title: "课程信息"
                    },
                    {
                        title: "课程章节"
                    },
                    {
                        title: "教学资料库"
                    },
                    {
                        title: "操作记录"
                    }
                ],
                tabList2: [{
                        title: "课程信息"
                    },
                    {
                        title: "课程章节"
                    },
                    {
                        title: "教学资料库"
                    }
                ],
                cous: {},
                current: 0,
                jyzid: this.$store.state.jyzid,
                maxRole: this.$store.state.maxRole,
                lineForm: {
                    id: '',
                    name: '',
                    material: '',
                    img: '',
                    target: '',
                    zbname: '',
                    info: ''
                },
            };
        },
        filters: {
            dateFormat: function(e1) {
                return moment(e1).format("YYYY-MM-DD");
            }
        },
        mounted() {

            if (this.maxRole == 'team') {
                this.list = this.tabList;
            } else if (this.maxRole == 'cmo') {
                this.list = this.tabList2.splice(0,2);
            } else {
                this.list = this.tabList2;
            }
            // this.cous = JSON.parse(localStorage.getItem('ldkc'));

        },
        created() {
            this.cous = JSON.parse(localStorage.getItem('ldkc'));
            // console.log(this.cous)
            this.getEditData()

        },
        methods: {
            goEdit() {
                this.$router.push({
                    path: '/ldsj_jyzz/course_detail',
                    query: {
                        cousid: this.cous.id
                    }
                })
                console.log(this.cous.id);
            },
            changeTab(i) {
                this.current = i
            },
            clickEdit(cousid) {
                localStorage.setItem('kcId', cousid)
                this.$router.push({
                    name: "bjkc_jyzz"
                })
            },
            getEditData() {
                this.$api.jyz.cousInfo({
                    'cousid': this.cous.id
                }).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.lineForm = res.data
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
        }
    };
</script>

<style scoped lang="scss">
    .pos {
        position: absolute;
    }

    .material {
        padding: 3px 15px;
        top: 0;
        left: 0;
        background: #FFB433;
        border-radius: 7px 0px 4px 0px;
        color: #fff;
    }

    .mask {
        width: 100%;
        height: 58px;
        bottom: 0;
        left: 0;
        // width: 100%;
        background-color: rgba(25, 41, 60, .4);
        color: #fff;

    }

    .edit-btn {
        top: 16px;
        right: 22px;
        width: 102px;
        height: 28px;
        cursor: pointer;
        line-height: 28px;
        background: linear-gradient(-13deg, #626BF1, #989BFA);
        color: #fff;
        border-radius: 14px;
        transition: .2s ease-in-out .1s;

        &:hover {
            box-shadow: 0px 4px 13px 0px rgba(63, 72, 207, 0.33);
        }
    }

    .couse-info {
        position: relative;
        height: 145px;
        overflow: hidden;
        border-radius: 7px;
    }

    .bottom {
        height: 100%;
    }

    .bgf {
        background-color: #fff;
    }

    .left {
        padding: 10px 0;
        // width: 340px;
        background-color: #fff;

        .img {
            width: 218px;
            height: 120px;
            border-radius: 7px;
        }

        .bold {
            font-size: 18px;
        }

        .name {
            padding-left: 20px;
            max-width: 600px;
            width: 60%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            .edit {
                width: 76px;
                height: 26px;
                background: #FEF8F2;
                border: 1px solid #FF9B4F;
                border-radius: 13px;
                color: #FF9B4F;
                line-height: 26px;
                cursor: pointer;
            }
        }
    }

    .edit {
        cursor: pointer;
    }

    .edit:hover {
        color: #2019e1;
    }

    .right {
        padding-right: 20px;

        .time {
            font-size: 14px;
            color: #5F6572;
        }

        .zb {
            color: #2F3142;
            font-weight: 600;
        }
    }

    .tab {
        margin: 0 20px;
        padding: 20px 0;
        border-bottom: 4px solid #fff;

        //         border-bottom: 4px solid #626BF1;
        &.active {
            border-bottom: 4px solid #626BF1;
            color: #626BF1;
        }

        &:hover {
            border-bottom: 4px solid #626BF1;
            color: #626BF1;
            transition: ease-in-out .3s;
        }
    }

    .bgf>>>.el-divider--horizontal {
        margin: 0 20px;
        width: auto;
    }

    .row {
        box-sizing: border-box;
    }

    .hg100 {
        height: 100%;
    }

    .shi {
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        overflow-y: auto;
    }

    .shi::-webkit-scrollbar {
        width: 0px;
    }

    .zhubian {
        margin-top: 30px;
        text-align: left;
        width: 200px;
        font-size: 14px;
    }

    .course-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main {
        position: relative;
        height: 100%;
    }

    .posa {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        background-color: #fff;

        h3 {
            font-size: 18px;
        }

        .label {
            display: block;
            width: 76px;
            height: 40px;
            line-height: 40px;
            font-weight: 600;
            font-size: 15px;
            margin-right: 10px;
        }

        .btn {
            display: flex;
        }
    }
</style>
